分享人:张雪飞
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
DOM是什么?
DOM 是 Document Object Model(文档对象模型)的缩写。
DOM是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
在 HTML DOM中,所有事物都是节点。DOM 是被视为节点树的 HTML。
什么是DOM节点?
HTML 文档中的所有内容都是节点
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点
常见的DOM操作有哪些?
querySelector() 方法
querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。 注意: querySelector() 方法仅仅返回匹配指定选择器的第一个元素。 如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代。
document.querySelector("#demo");
getElementsByTagName() 方法
getElementsByTagName() 方法可返回带有指定标签名的对象的集合。
getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。
传递给 getElementsByTagName() 方法的字符串可以不区分大小写。
getElementsByClassName() 方法
获取所有指定类名的元素:
getElementsByClassName() 方法返回文档中所有指定类名的元素集合,作为 NodeList 对象。
NodeList 对象代表一个有顺序的节点列表。NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。
可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数,并循环各个元素来获取你需要的那个元素。
getElementById() 方法
getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。
如果您需要查找文档中的一个特定的元素,最有效的方法是 getElementById()。
在操作文档的一个特定的元素时,最好给该元素一个 id 属性,为它指定一个(在文档中)唯一的名称,然后就可以用该 ID 查找想要的元素。
常见的DOM - 事件又哪些?
onclick 事件——当用户点击时
onload 事件——用户进入
onunload 事件——用户离开
onmouseover事件——鼠标移入
onmouseout事件——鼠标移出
onmousedown事件——鼠标按下
onmouseup 事件——鼠标抬起
感谢大家观看
BY :李仁